import TitleCard from "@/pages/components/TitleCard";
import ChartCard from "./ChartCard";
import SelectCard from "./SelectCard";
import { pieChartColorEnum } from "@/enums/pieChart.enum";

const ProjectStatisticChart = () => {
  const xAxisData = ["房产", "房歌", "惠能", "建设", "昆明", "长滩", "西城", "龙溪", "鑫隆", "隆信", "三亚", "其他"];
  const option = {
    color: [pieChartColorEnum.primary, pieChartColorEnum.success],
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
    },
    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
    legend: {
      data: [{ name: "支出" }, { name: "收入" }],
    },
    xAxis: [{ type: "category", data: xAxisData, axisTick: { alignWithLabel: true } }],
    yAxis: [{ type: "value", name: "单位（万元）", axisLabel: { formatter: "{value} 万元" } }],
    series: [
      {
        name: "支出",
        type: "bar",
        barWidth: "40%",
        data: [70, 25, 211, 236, 222, 331, 10, 26, 235, 161, 31, 122],
        tooltip: {
          valueFormatter: (value: number) => value + "万元",
        },
      },
      {
        name: "收入",
        type: "bar",
        barWidth: "40%",
        data: [100, 52, 200, 334, 390, 330, 220, 325, 135, 267, 131, 220],
        tooltip: {
          valueFormatter: (value: number) => value + "万元",
        },
      },
    ],
  };
  const selectCardParams = {
    label: "项目名称",
    onChange: () => {},
    options: [
      { value: "jack", label: "Jack" },
      { value: "lucy", label: "Lucy" },
      { value: "Yiminghe", label: "yiminghe" },
      { value: "disabled", label: "Disabled" },
    ],
  };
  return (
    <div className="w-full">
      <TitleCard title="收支项目统计">
        <SelectCard {...selectCardParams} />
      </TitleCard>
      <ChartCard option={option}></ChartCard>
    </div>
  );
};
export default ProjectStatisticChart;
